<template>
  <el-drawer
    title="添加/编辑"
    :visible.sync="drawer"
    direction="rtl"
    size="554px"
  >
    <div class="drawer-content">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-position="top">
        <el-form-item label="品牌名称">
          <el-input v-model="ruleForm.name" clearable placeholder="请输入品牌名称" />
        </el-form-item>
        <el-form-item label="封面上传">
          <div style="width: 100%">
            <DragUpload style="width: 100%" :url="ruleForm.img" @on-success="url => ruleForm.img = url" />
          </div>
        </el-form-item>
        <el-form-item label="图文介绍">
          <TEditor v-model="ruleForm.content" />
        </el-form-item>
      </el-form>

      <div slot="footer" style="text-align: right;margin-top: 20px">
        <el-button @click="drawer = false">取消</el-button>
        <el-button type="primary" @click="onSave">提交</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import TEditor from '@/components/Editor'
import { http_brand } from '@/api';

export default {
  name: 'AuditDetail',
  components: {
    TEditor
  },
  data() {
    return {
      drawer: false,
      activeName: '1',
      ruleForm: {
        id: undefined,
        img: '',
        name: '',
        content: ''
      },
      rules: {

      }
    }
  },
  methods: {
    open(item) {
      if (item) {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = item[key]
        }
      } else {
        this.ruleForm = {
          id: undefined,
          img: 'http:',
          name: '',
          content: ''
        }
      }
      this.drawer = true
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          http_brand[this.ruleForm.id ? 'update' : 'create']({
            ...this.ruleForm
          }).then(res => {
            console.log(res)
            this.$message.success(res.msg)
            this.$emit('get-page')
            this.drawer = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
